import React from 'react';
import { Button, Input,Form, InputNumber,Row,Col } from 'antd';
import {
  CloseSquareFilled,
  PlusOutlined
} from '@ant-design/icons';
import {HasPermission} from '@/components/AuthComponent/HasPermission';
const AuthButton = HasPermission(Button);
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 3,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 12,
    },
    md: {
      span: 19,
    },
  },
};
const otherFormItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 12,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 12,
    },
    md: {
      span: 19,
    },
  },
};
const submitFormLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 10,
      offset: 3,
    },
  },
};

  const SaleWageForm = props => {
    const { item,onFinish,submitting } = props;
    const [form] = Form.useForm();

    const _onFinish = (values,item) =>{
        onFinish(values,item)
    }
    return <Form
    style={{
        marginTop: 8,
    }}
    form={form}
    name="basic"
    onFinish={(values)=>_onFinish(values,item)}
    initialValues={item}
    >
    <FormItem
        {...formItemLayout}
        label="名称"
        name="name"
        rules={[
        {
            required: true,
            message: '请输入名称',
        },
        ]}
    >
        <Input placeholder="请输入"/>
    </FormItem>
    <Form.List name="salaryGradientDTOList">
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) => (
              <Row key={field.key}>
                <Col span={6}>
                  <Form.Item
                    {...otherFormItemLayout}
                    label="销售梯度"
                    rules={[
                      {
                          required: true,
                          message: '请输入销售梯度',
                      }
                    ]}
                    name={[field.name, "startGradient"]}
                    fieldKey={[field.fieldKey, "startGradient"]}
                  >
                      <InputNumber
                        min={0}
                        style={{width:'100%'}}
                      />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    label="&nbsp;&nbsp;&nbsp;&nbsp;元（含）   ~ &nbsp;&nbsp;&nbsp;&nbsp;"
                    name={[field.name, "endGradient"]}
                    fieldKey={[field.fieldKey, "endGradient"]}
                  >
                     <InputNumber
                        min={0}
                        style={{width:'100%'}}
                      />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="&nbsp;&nbsp;&nbsp;&nbsp;元（不含） ，提成"
                    name={[field.name, "proportion"]}
                    fieldKey={[field.fieldKey, "proportion"]}
                  >
                      <InputNumber
                        min={0}
                        formatter={value => `${value}%`}
                        parser={value => value.replace('%', '')}
                      />
                  </Form.Item>
                </Col>
                <Col flex="none" span={4}>
                  <AuthButton auth={[`wage:sale:delete:td`]}  icon={<CloseSquareFilled />} onClick={() => {remove(field.name)}}>
                    删除
                  </AuthButton>
                </Col>
              </Row>
            ))}
            <Form.Item {...submitFormLayout}>
              <Button
                icon={<PlusOutlined />}
                type="dashed"
                onClick={() => {
                  add();
                }}
                style={{ width: "40%" }}
              >
              添加梯度  
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
    <FormItem
        {...submitFormLayout}
        style={{
        marginTop: 32,
        }}
    >
        <AuthButton auth={[`wage:sale:add`]} type="primary" htmlType="submit" loading={submitting}>
        保存
        </AuthButton>
    </FormItem>
    </Form>
  }

  export default SaleWageForm;